<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数">
    <button id="trans-btn">转化为二进制</button>
    <button id="three-game">3的游戏</button>
    <button id="99times1">99乘法表1</button>
    <button id="99times2">99乘法表2</button>
    <button id="hello">问候语</button>
    <p id="result">运算结果</p>
    <div id="99">99乘法表</div>
    <script>
        function dec2bin(decNumber) {
            // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
            // 这里是上一个任务的实现
            if (Number(decNumber) <= 0 || !Number.isInteger(Number(decNumber))) {
                alert('请输入正整数');
                return '';
            }
            let result = ''
            while (decNumber != 0) {
                let left = decNumber % 2;
                decNumber = Math.floor(decNumber / 2);
                result += left;
            }
            return result.split('').reverse().join('');
        }

        // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
        // 新的需求是，转化显示后的二进制数为bin-bit中输入的数字宽度，例如
        // dec-number为5，bin-bit为5，则转化后数字为00101
        // 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错
        // Some coding

        var btn = document.getElementById('trans-btn');
        3
        btn.onclick = function() {
            var decNumber = document.getElementById('dec-number').value;
            var binBit = document.getElementById('bin-bit').value;
            var result = dec2bin(decNumber);
            if (result.length <= binBit) {
                let del = binBit - result.length;
                for (let i = 0; i < del; i++) {
                    result = '0' + result;
                }
            } else {
                return console.log('错误！bin-bit小于转化后的二进制本身位数')
            }
            var p = document.getElementById('result');
            p.innerHTML = '运算结果：' + result;
        }

        document.getElementById('three-game').onclick = function() {
            let result = '';
            for (let i = 1; i <= 100; i++) {
                if (i % 3 == 0 || include(i)) {
                    result += ('PA' + ',');
                } else {
                    result += (i + ',');
                }
            }
            console.log(result.slice(0, result.length - 1));
        }

        var include = function(i) {
            var str = String(i).split('');
            // console.log(str)
            for (let i = 0; i < str.length; i++) {
                if (str[i] === '3') {
                    return true;
                }
            }
            return false;
        }

        document.getElementById('99times1').onclick = function() {
            let result = '';
            for (let i = 1; i <= 9; i++) {
                let row = '';
                for (let j = 1; j <= i; j++) {
                    row += i + '*' + j + '=' + (i * j) + ' ';
                }
                console.log(row);
            }
        }

        document.getElementById('99times2').onclick = function() {
            var table = document.createElement('table');
            table.style = 'border-collapse: collapse';
            var div = document.getElementById('99');
            div.append(table);
            for (let i = 1; i <= 9; i++) {
                // let row = '';
                var tr = document.createElement('tr');
                // tr.style = 'border-collapse: collapse';
                for (let j = 1; j <= i; j++) {
                    // row += i * j + ' ';
                    var td = document.createElement('td');
                    td.innerHTML = i + '*' + j + '=' + (i * j);
                    td.style = 'border:1px solid #000; border-collepse:collepse';
                    tr.append(td);
                }
                table.append(tr);
                // console.log(row);
            }
        }

        document.getElementById('hello').onclick = function() {
            let date = new Date();
            console.log(date.getHours());
            let hour = date.getHours();
            if (hour >= 6 && hour < 12) {
                alert('早上好');
            } else if (hour >= 12 && hour < 14) {
                alert('中午好');
            } else if (hour >= 14 && hour < 19) {
                alert('下午好');
            } else {
                alert('晚上好');
            }
        }
    </script>
</body>

</html>